<template>
	<view class="gradient-container">
		<view class="status_bar">
			<!-- 占位符 -->
		</view>
		<view class="pagetitle">
			<uni-icons type="back" style="position:absolute; left: 10pt;bottom: 10pt;" size="16pt" @click="go_home"></uni-icons>
			<view class="center" style="height: 44pt;width: 120pt;">
				<text style="margin: 12pt 0pt;">消息</text>
			</view>
		</view>
		
		<view style="display:flex;justify-content: center;flex-direction: row;margin-bottom: 16pt;">
			<view :class="['text_padding',{blue:show_modle===0}]" @click="showpage(0)"><text class="text">入驻申请</text></view>
			<view :class="['text_padding',{blue:show_modle===1}]" @click="showpage(1)"><text class="text" >提现申请</text></view>
		</view>
		
		<view v-if="show_modle===0">
			<view  :class=" ['record-list',{show:show_modle===1}]">
						  
					        <view 
					          v-for="(item, index) in records1" 
					          style="margin: 8pt;justify-content: center;background-color: argb(0,0,0,0);"
					        >
									 <view class="custom-list-item">
										
										<view class="thumb-area">
										  <view style="background-color: #f0f0f0; width: 32pt; height: 32pt; border-radius: 50%; margin-right: 12px;">
											  <image :src='item.avatar'></image>
										  </view>
										</view>

										
										<view class="content-area">
										  <text class="title">{{ item.shopName }}\n</text>
										  <text class="note">{{ item.time }}</text>
										</view>

										
										<view class="status-area">
										  <text :class="`status ${item.status === '待审核' ? 'status1' : item.status === '审核成功' ? 'status2' : item.status === '审核失败' ? 'status3' : ''}`">
										  {{ item.status }}\n</text>
										  <text class="note"> &emsp;{{item.status_reason}}</text>
										  <text></text>
										</view>
									  </view>
					        </view>
			</view>
		</view>
		<view v-if="show_modle===1">
			<view  :class=" ['record-list',{show:show_modle===0}]">
						  
					        <view 
					          v-for="(item, index) in records2" 
					          style="margin: 8pt;justify-content: center;background-color: argb(0,0,0,0);"
					        >
									 <view class="custom-list-item">
										
										<view class="thumb-area">
										  <view style="background-color: #f0f0f0; width: 32pt; height: 32pt; border-radius: 50%; margin-right: 12px;">
											  <image :src='item.avatar'></image>
										  </view>
										</view>
		
										
										<view class="content-area">
										  <text class="title">{{ item.shopName }}\n</text>
										  <text class="note">{{ item.time }}</text>
										</view>
		
										
										<view class="status-area">
										  <text :class="`status ${item.status === '待审核' ? 'status1' : item.status === '审核成功' ? 'status2' : item.status === '审核失败' ? 'status3' : ''}`">
										  {{ item.status }}\n</text>
										  <text class="note"> &emsp;{{item.status_reason}}</text>
										  <text></text>
										</view>
									  </view>
					        </view>
			</view>
		</view>

		
	</view>
</template>





<script setup>
import { ref, computed } from 'vue'

// 模拟数据
const records1 = ref([
  {
    id: 1,
    shopName: '阳光便利店',
    avatar: '/static/shop-avatar1.jpg',
    amount: 1500.00,
	time:'2021-10-03 10:22:21',
	status:'待审核',
  },
  {
    id: 2,
    shopName: '天天超市',
    avatar: '/static/shop-avatar2.jpg',
    amount: -800.00,
	time:'2021-10-03 10:22:21',
	status:'待审核',
  },
  {
    id: 3,
    shopName: '快乐水果店',
    avatar: '/static/shop-avatar3.jpg',
    amount: 2300.50,
	time:'2021-10-03 10:22:21',
	status:'审核成功',
  },
  {
    id: 4,
    shopName: '美味面包房',
    avatar: '/static/shop-avatar4.jpg',
    amount: -1200.00,
	time:'2021-10-03 10:22:21',
	status:'审核失败',
	status_reason:'资质不合格'
  }
])
const records2=ref([
	{
		shopName: '阳光便利店',
		avatar: '/static/shop-avatar1.jpg',
		amount: 1500.00,
		time:'2021-10-03 10:22:21',
		status:'待审核',
	},{
		shopName: '阳光便利店',
		avatar: '/static/shop-avatar1.jpg',
		amount: 1500.00,
		time:'2021-10-03 10:22:21',
		status:'审核成功',
	},{
		shopName: '阳光便利店',
		avatar: '/static/shop-avatar1.jpg',
		amount: 1500.00,
		time:'2021-10-03 10:22:21',
		status:'待审核',
	},{
		shopName: '阳光便利店',
		avatar: '/static/shop-avatar1.jpg',
		amount: 1500.00,
		time:'2021-10-03 10:22:21',
		status:'审核失败',
		status_reason:'资质不合格'
	},
	
])

const show_modle=ref(0);
const formatDate = (dateStr) => {
  const date = new Date(dateStr)
  return `${date.getMonth()+1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`
}
const showpage=(index)=>{
	show_modle.value=index;
}
const go_home=()=>{
	uni.switchTab({
		url:'/pages/guanliyuan/index',
	});
}
</script>
<style scoped>
.custom-list-item {
  background-color: rgba(0, 0, 0, 0); /* 透明背景 */
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
}


.thumb-area {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}


.content-area {
  flex: 1;
  margin-left: 12px;
}

.title {
  font-size: 14pt;
  color: rgba(0, 0, 0, 0.80);
  
  margin-bottom: 4px;
}

.note {
  font-size: 10pt;
  color: rgba(0, 0, 0, 0.40);
}


.status-area {
  margin-left: 12px;
  margin-right: 12px;
}

.status {
  font-size: 14pt;
  color: rgba(0, 0, 0, 0.40);
}

.status1{
	color:#007AFF  ;
}
.status2{
	color:#00C777  ;
}
.status3{
	color:#FF3B30  ;
}
.blue{
	color:rgba(0, 122, 255, 1) ;
	background: linear-gradient(rgba(0, 122, 255, 1),rgba(0, 122, 255, 1)) no-repeat;
	background-size: 60pt 2pt;
	background-position: 10pt bottom;
}
</style>
<style>
.text{
	height: 22pt;
	width: 56pt;
	font-size: 14pt;
	line-height: 22pt;
}
.text_padding{
	margin-top: 12pt;
	margin-left: 28pt;
	margin-right: 28pt;
	padding:8pt 12pt 6pt ;
}
.container {
  padding-bottom: 80rpx;
}
.itme{
	margin: 6pt;
	height: 56pt;
	align-items: center;
	display: flex;
}
.image1{
	height: 32pt;
	width: 32pt;
}
.record-list {
	display: flow;
	background-color: argb(0,0,0,0);
	align-items: center;
	justify-content: space-between;
	margin-top:16pt;
}
.show{
	display: flex;
}	.center{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.pagetitle{
		position: relative;
		display: flex;
		width: 100%;
		height: 44pt;
		align-items: center;
		justify-content: center;
	}
</style>
